<template>
    <el-dialog
            title="添加角色"
            :visible.sync="message"
            :show-close="false"
            @close="resetInfo"
            width="40%">
        <!--        内容-->
        <span>
        <el-form label-width="80px" :model="roleInfo" :rules="roleRules" ref="roleRef">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="roleInfo.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="roleInfo.roleDesc"></el-input>
            </el-form-item>
        </el-form>
        </span>
        <!--        对话框底部-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="quit">取 消</el-button>
            <el-button type="primary" @click="addRole">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {addRoleData} from "../../../network/power";

    export default {
        name: "AddRoleDia",
        props:{
            message:{
                type:Boolean,
                default(){
                    return false
                }
            }
        },
        data(){
            return{
                roleInfo:{roleName:'',roleDesc:''},
                roleRules:{
                    roleName:[{required: true, message: '请输入角色名称', trigger: 'blur'}]
                }
            }
        },
        methods:{
            quit(){
                this.$bus.$emit('addRole')
            },
            //添加角色
            addRole(){
               this.$refs.roleRef.validate(valid => {
                   if (valid){
                       addRoleData(this.roleInfo).then(res => {
                           if (res.data.meta.status !== 201){
                               this.$message.error(res.data.meta.msg)
                           }
                           this.$message.success(res.data.meta.msg);
                           this.$bus.$emit('getRolesList');
                           this.$bus.$emit('addRole')
                           }
                       );
                   }
               });
            },
            //关闭窗口时重置表单
            resetInfo(){
                this.$refs.roleRef.resetFields()
            }
        }
    }
</script>

<style scoped>

</style>